
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>发布配置 · test search plus plugin</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-search-pro/search.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-fontsettings/website.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-highlight/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="Single-bundle.html" />
    
    
    <link rel="prev" href="Deployment-strategies.md" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="./">
            
                <a href="./">
            
                    
                    Introduction
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="Introduction-to-Webpack.html">
            
                <a href="Introduction-to-Webpack.html">
            
                    
                    介绍 Webpack
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="Getting-started.html">
            
                <a href="Getting-started.html">
            
                    
                    第一步
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="Running-a-workflow.html">
            
                <a href="Running-a-workflow.html">
            
                    
                    开始工作流
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="Automatic-browser-refresh.html">
            
                <a href="Automatic-browser-refresh.html">
            
                    
                    浏览器自动刷新
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="Requiring-files.html">
            
                <a href="Requiring-files.html">
            
                    
                    引入文件
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="Introduction-to-React-JS.html">
            
                <a href="Introduction-to-React-JS.html">
            
                    
                    React JS
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="Configuring-react-js.html">
            
                <a href="Configuring-react-js.html">
            
                    
                    配置 React JS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="Optimizing-rebundling.html">
            
                <a href="Optimizing-rebundling.html">
            
                    
                    优化重合并
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="Type-checking-with-flow.html">
            
                <a href="Type-checking-with-flow.html">
            
                    
                    Flow
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="CSS-Fonts-Images.md">
            
                <span>
            
                    
                    CSS, Fonts and Images
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="Loading-CSS.html">
            
                <a href="Loading-CSS.html">
            
                    
                    加载 CSS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="Automatic-CSS-refresh.html">
            
                <a href="Automatic-CSS-refresh.html">
            
                    
                    自动刷新 CSS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="Loading-LESS-or-SASS.html">
            
                <a href="Loading-LESS-or-SASS.html">
            
                    
                    加载 LESS 和 SASS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="Inlining-images.html">
            
                <a href="Inlining-images.html">
            
                    
                    内联 images
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="Inlining-fonts.html">
            
                <a href="Inlining-fonts.html">
            
                    
                    内联 fonts
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="Deployment-strategies.md">
            
                <span>
            
                    
                    部署策略
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter active" data-level="1.5.1" data-path="Structuring-configuration.html">
            
                <a href="Structuring-configuration.html">
            
                    
                    发布配置
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="Single-bundle.html">
            
                <a href="Single-bundle.html">
            
                    
                    合并成单文件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="Split-app-and-vendors.html">
            
                <a href="Split-app-and-vendors.html">
            
                    
                    分离应用和第三方
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="Multiple-entry-points.html">
            
                <a href="Multiple-entry-points.html">
            
                    
                    多重入口
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="Lazy-loaded-entry-points.html">
            
                <a href="Lazy-loaded-entry-points.html">
            
                    
                    懒加载入口文件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="Isomorphic-app.html">
            
                <a href="Isomorphic-app.html">
            
                    
                    同构渲染
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="Wing-It-Like-a-Pro.html">
            
                <a href="Wing-It-Like-a-Pro.html">
            
                    
                    进阶
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="Optimizing-development.html">
            
                <a href="Optimizing-development.html">
            
                    
                    优化开发
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="Hot-loading-components.html">
            
                <a href="Hot-loading-components.html">
            
                    
                    热加载组件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="JavaScript-next.html">
            
                <a href="JavaScript-next.html">
            
                    
                    使用下一代 JavaScript
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="Optimizing-caching.html">
            
                <a href="Optimizing-caching.html">
            
                    
                    优化缓存
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="Matchers.html">
            
                <a href="Matchers.html">
            
                    
                    匹配器
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="Lazy-loading-entry-points.md">
            
                <span>
            
                    
                    懒加载入口
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="Creating-a-common-bundle.md">
            
                <span>
            
                    
                    创建一个复用代码
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="Understanding-chunks.html">
            
                <a href="Understanding-chunks.html">
            
                    
                    理解 Chunks
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="Authoring-libraries.html">
            
                <a href="Authoring-libraries.html">
            
                    
                    创建库
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="." >发布配置</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <p>There are two things you want to do preparing for a production build.</p>
<p>&#x8FD9;&#x91CC;&#x6709;&#x4E24;&#x4EF6;&#x4E8B;&#x4F60;&#x9700;&#x8981;&#x4E3A;&#x751F;&#x4EA7;&#x53D1;&#x5E03;&#x505A;&#x51C6;&#x5907;&#x3002;</p>
<ol>
<li>Configure a script to run in your package.json file</li>
<li>Create a production config</li>
</ol>
<ol>
<li>&#x914D;&#x7F6E;&#x4F60;&#x7684; package.json &#x91CC;&#x7684;&#x811A;&#x672C;</li>
<li>&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x751F;&#x4EA7;&#x7684;&#x914D;&#x7F6E;</li>
</ol>
<h3 id="&#x521B;&#x5EFA;&#x811A;&#x672C;">&#x521B;&#x5EFA;&#x811A;&#x672C;</h3>
<p>We have already used <em>package.json</em> to create the <code>npm run dev</code> script. Now let us set up <code>npm run deploy</code>.</p>
<p>&#x6211;&#x4EEC;&#x5DF2;&#x7ECF;&#x4F7F;&#x7528;&#x8FC7; <em>package.json</em> &#x6765;&#x521B;&#x5EFA; <code>npm run dev</code> &#x7684;&#x811A;&#x672C;&#xFF0C;&#x73B0;&#x5728;&#x8BA9;&#x6211;&#x4EEC;&#x8BBE;&#x7F6E; <code>npm run deploy</code>&#x3002;</p>
<pre><code class="lang-json">{
  <span class="hljs-string">&quot;name&quot;</span>: <span class="hljs-string">&quot;my-project&quot;</span>,
  <span class="hljs-string">&quot;version&quot;</span>: <span class="hljs-string">&quot;0.0.0&quot;</span>,
  <span class="hljs-string">&quot;description&quot;</span>: <span class="hljs-string">&quot;My awesome project!&quot;</span>,
  <span class="hljs-string">&quot;main&quot;</span>: <span class="hljs-string">&quot;app/main.js&quot;</span>,
  <span class="hljs-string">&quot;scripts&quot;</span>: {
    <span class="hljs-string">&quot;dev&quot;</span>: <span class="hljs-string">&quot;webpack-dev-server --devtool eval --progress --colors --hot --content-base build&quot;</span>,
    <span class="hljs-string">&quot;deploy&quot;</span>: <span class="hljs-string">&quot;NODE_ENV=production webpack -p --config webpack.production.config.js&quot;</span>
  },
  <span class="hljs-string">&quot;author&quot;</span>: <span class="hljs-string">&quot;&quot;</span>,
  <span class="hljs-string">&quot;license&quot;</span>: <span class="hljs-string">&quot;ISC&quot;</span>,
  <span class="hljs-string">&quot;devDependencies&quot;</span>: {
    <span class="hljs-string">&quot;webpack&quot;</span>: <span class="hljs-string">&quot;^1.4.13&quot;</span>,
    <span class="hljs-string">&quot;webpack-dev-server&quot;</span>: <span class="hljs-string">&quot;^1.6.6&quot;</span>
  },
  <span class="hljs-string">&quot;dependencies&quot;</span>: {}
}
</code></pre>
<p>As you can see we are just running webpack with the production argument and pointing to a different configuration file. We also use the environment variable &quot;production&quot; to allow our required modules to do their optimizations. Lets us create the config file now.</p>
<p>&#x6B63;&#x5982;&#x4F60;&#x6240;&#x89C1;&#xFF0C;&#x6211;&#x4EEC;&#x53EA;&#x662F;&#x7528;&#x751F;&#x4EA7;&#x53C2;&#x6570;&#x8FD0;&#x884C; Webpack &#x6765;&#x6307;&#x5411;&#x53E6;&#x4E00;&#x4E2A;&#x914D;&#x7F6E;&#x6587;&#x4EF6;&#x3002;&#x6211;&#x4EEC;&#x4E5F;&#x4F7F;&#x7528;&#x4E86;&#x73AF;&#x5883;&#x53D8;&#x91CF; &#x201C;production&#x201D; &#x6765;&#x8BA9;&#x6211;&#x4EEC;&#x7684;&#x6A21;&#x5757;&#x81EA;&#x52A8;&#x53BB;&#x4F18;&#x5316;&#x3002;&#x8BA9;&#x6211;&#x4EEC;&#x5F00;&#x59CB;&#x6765;&#x521B;&#x5EFA;&#x914D;&#x7F6E;&#x6587;&#x4EF6;&#x3002;</p>
<h3 id="&#x521B;&#x5EFA;&#x751F;&#x4EA7;&#x914D;&#x7F6E;">&#x521B;&#x5EFA;&#x751F;&#x4EA7;&#x914D;&#x7F6E;</h3>
<p>So there really is not much difference in creating the dev and production versions of your webpack config. You basically point to a different output path and there are no workflow configurations or optimizations. What you also want to bring into this configuration is cache handling.</p>
<p>&#x53EF;&#x4EE5;&#x770B;&#x5230;&#xFF0C;&#x5176;&#x5B9E;&#x751F;&#x4EA7;&#x73AF;&#x5883;&#x7684;&#x914D;&#x7F6E;&#x548C;&#x5F00;&#x53D1;&#x7684;&#x914D;&#x7F6E;&#x6CA1;&#x6709;&#x592A;&#x5927;&#x7684;&#x4E0D;&#x540C;&#xFF0C;&#x4E3B;&#x8981;&#x7684;&#x4E0D;&#x540C;&#x662F;&#x6307;&#x5411;&#x4E86;&#x4E00;&#x4E2A;&#x4E0D;&#x540C;&#x7684;&#x8F93;&#x51FA;&#x8DEF;&#x5F84;&#xFF0C;&#x7136;&#x540E;&#x4E5F;&#x6CA1;&#x6709;&#x4E86; workflow &#x7684;&#x914D;&#x7F6E;&#x548C;&#x4F18;&#x5316;&#xFF0C;&#x53EF;&#x4EE5;&#x770B;&#x5230;&#x65B0;&#x52A0;&#x5165;&#x5230;&#x914D;&#x7F6E;&#x91CC;&#x7684;&#x662F;&#x5904;&#x7406;&#x7F13;&#x5B58;&#x7684;&#x914D;&#x7F6E;&#x3002;</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-keyword">var</span> node_modules_dir = path.resolve(__dirname, <span class="hljs-string">&apos;node_modules&apos;</span>);

<span class="hljs-keyword">var</span> config = {
  entry: path.resolve(__dirname, <span class="hljs-string">&apos;app/main.js&apos;</span>),
  output: {
    path: path.resolve(__dirname, <span class="hljs-string">&apos;dist&apos;</span>),
    filename: <span class="hljs-string">&apos;bundle.js&apos;</span>
  },
  <span class="hljs-built_in">module</span>: {
    loaders: [{
      test: <span class="hljs-regexp">/\.js$/</span>,

      <span class="hljs-comment">// There is not need to run the loader through</span>
      <span class="hljs-comment">// vendors</span>
      <span class="hljs-comment">// &#x8FD9;&#x91CC;&#x518D;&#x4E5F;&#x4E0D;&#x9700;&#x901A;&#x8FC7;&#x4EFB;&#x4F55;&#x7B2C;&#x4E09;&#x65B9;&#x6765;&#x52A0;&#x8F7D;</span>
      exclude: [node_modules_dir],
      loader: <span class="hljs-string">&apos;babel&apos;</span>
    }]
  }
};

<span class="hljs-built_in">module</span>.exports = config;
</code></pre>
<h3 id="&#x53D1;&#x5E03;">&#x53D1;&#x5E03;</h3>
<p>Run <code>npm run deploy</code> in the root of the project. Webpack will now run in production mode. It does some optimizations on its own, but also React JS will do its optimizations. Look into caching for even more production configuration.</p>
<p>&#x5728;&#x9879;&#x76EE;&#x6839;&#x76EE;&#x5F55;&#x5904;&#x8FD0;&#x884C; <code>npm run deploy</code>&#xFF0C;Webpack &#x73B0;&#x5728;&#x4F1A;&#x8FD0;&#x884C;&#x751F;&#x4EA7;&#x6A21;&#x5F0F;&#xFF0C;&#x4ED6;&#x4F1A;&#x81EA;&#x52A8;&#x505A;&#x4E00;&#x4E9B;&#x4F18;&#x5316;&#xFF0C;&#x4E0D;&#x8FC7;&#xFF0C;React Js &#x4E5F;&#x4F1A;&#x505A;&#x81EA;&#x5DF1;&#x7684;&#x4F18;&#x5316;&#x3002;&#x53EF;&#x4EE5;&#x6DF1;&#x5165;&#x4E86;&#x89E3;&#x7F13;&#x5B58;&#x5904;&#x7406;&#x6765;&#x505A;&#x66F4;&#x591A;&#x7684;&#x751F;&#x4EA7;&#x914D;&#x7F6E;&#x3002;</p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="Deployment-strategies.md" class="navigation navigation-prev " aria-label="Previous page: 部署策略">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="Single-bundle.html" class="navigation navigation-next " aria-label="Next page: 合并成单文件">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"发布配置","level":"1.5.1","depth":2,"next":{"title":"合并成单文件","level":"1.5.2","depth":2,"path":"Single-bundle.md","ref":"Single-bundle.md","articles":[]},"previous":{"title":"部署策略","level":"1.5","depth":1,"path":"Deployment-strategies.md","ref":"Deployment-strategies.md","articles":[{"title":"发布配置","level":"1.5.1","depth":2,"path":"Structuring-configuration.md","ref":"Structuring-configuration.md","articles":[]},{"title":"合并成单文件","level":"1.5.2","depth":2,"path":"Single-bundle.md","ref":"Single-bundle.md","articles":[]},{"title":"分离应用和第三方","level":"1.5.3","depth":2,"path":"Split-app-and-vendors.md","ref":"Split-app-and-vendors.md","articles":[]},{"title":"多重入口","level":"1.5.4","depth":2,"path":"Multiple-entry-points.md","ref":"Multiple-entry-points.md","articles":[]},{"title":"懒加载入口文件","level":"1.5.5","depth":2,"path":"Lazy-loaded-entry-points.md","ref":"Lazy-loaded-entry-points.md","articles":[]},{"title":"同构渲染","level":"1.5.6","depth":2,"path":"Isomorphic-app.md","ref":"Isomorphic-app.md","articles":[]}]},"dir":"ltr"},"config":{"plugins":["-lunr","-search","search-pro","fontsettings","livereload"],"root":"./content","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"search-pro":{},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{},"highlight":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{"version":"0.0.0"},"title":"test search plus plugin","gitbook":"*"},"file":{"path":"Structuring-configuration.md","mtime":"2017-01-24T08:51:37.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-01-24T08:53:13.796Z"},"basePath":".","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="gitbook/gitbook.js"></script>
    <script src="gitbook/theme.js"></script>
    
        
        <script src="gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-search-pro/search.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    

    </body>
</html>

